import React from 'react'
import {Button, Popconfirm, Table} from "antd";
import dayjs from "dayjs";
export default class TableComponents extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            tableData:[
                {
                    id:'1',
                    desc:'hello world',
                    status:'success',
                    completeTime:new Date(),
                }
            ]
        }
    }

    /**
     * 删除
     */
    operation = (status,ev)=>{
        console.log(status)
    }

    render() {

        const columns = [
            {
                title: '编号',
                dataIndex: 'id',
                key: 'id',
                render: (text, record) => {
                    console.log(record)
                    return (
                        <a>{text}</a>
                    )
                }
            },
            {
                title: '任务描述',
                dataIndex: 'desc',
                key: 'desc',
            },
            {
                title: '状态',
                dataIndex: 'status',
                key: 'status',
            },
            {
                title: '完成时间',
                dataIndex: 'completeTime',
                key: 'completeTime',
                render: (text, record) => {
                    console.log(dayjs())
                    return (
                        <a>{dayjs(text).format("YYYY-MM-DD HH:mm:ss")}</a>
                    )
                }
            },
            {
                title:'操作',
                render:(text, record) => {
                    const danger = record.status === 'danger';
                    return (
                        <>
                        <Popconfirm title={danger ? '确定删除?' : '确定?'}
                                    onConfirm={(ev)=>this.operation(danger, ev)}>
                            <Button type='link' danger={danger}>完成</Button>
                        </Popconfirm>
                        </>
                    )
                }
            }
        ]

        const tableStyle = {
            marginTop:'3%'
        }

        return (
            <>
                <Table columns={columns} dataSource={this.state.tableData} style={tableStyle} ></Table>
            </>
        )
    }

}